<template>
    <layout title="联系人列表" :showTabBar="false">
        <x-icon slot="icon" @click="onAdd" type="plus" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

        <group v-for="li in list">
            <cell :title="li.name" is-link :border-intent="false" arrow-direction="right" @click.native="onDetail(li)"></cell>
            <template>
                <cell-form-preview :border-intent="false" :list="li.info"></cell-form-preview>
            </template>
        </group>
    </layout>

</template>

<script>
    import { XInput, Group, Cell, Divider, PopupPicker, XButton, CellFormPreview } from 'vux'
    import Layout from './Layout.vue'
    import { contact as api } from '../api'
    import { mapGetters } from 'vuex'

    export default {
        name: 'customer',
        components: {
            XInput,
            Group,
            Cell,
            Divider,
            PopupPicker,
            Layout,
            XButton,
            CellFormPreview,
        },
        data() {
            return {
                form: {
                    name: '',
                    address: '',
                    val: []
                },
                list: []
            }
        },
        computed: {
            ...mapGetters(['dicObj'])
        },
        async mounted() {
            this.$store.commit('showBack', true)
            this.$store.commit('selectedTab', 'sale')
            await this.getList()
        },
        methods: {
            onAdd() {
                this.$router.push({ path: '/contact-edit', query: this.$route.query })
            },
            async getList() {
                let ret = await api.index({
                    customer_id: this.$route.query.customer_id
                })
                let list = []
                for (let item of ret.data) {
                    let obj = {
                        id: item.id,
                        name: item.name,
                        info: [
                            //{ label: '姓名', value: item.name },
                            { label: '性别', value: this.dicObj[item.sex] },
                            { label: '部门', value: item.dept },
                            { label: '职位/称呼', value: item.position },
                            { label: '手机', value: item.tel },
                            { label: '座机', value: item.work_tel },
                            { label: '邮箱', value: item.email },
                            { label: 'QQ/MSN', value: item.qq },
                        ],
                    }
                    list.push(obj)
                }
                this.list = list
            },
            onDetail(item) {
                this.$router.push({ path: '/contact-edit', query: { id: item.id } })
            }
        }

    }
</script>
